import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addAction } from '../store/action/todo';

export default function Header() {
  const [task, setTask] = useState('');
  const dispatch = useDispatch();

  const handleKeyUp = (e) => {
    if (e.key === 'Enter') {
      console.log('回车被触发了  ----->  ');
      const newItem = { isDone: false, id: Date.now(), task };

      const newTodo = addAction(newItem);
      dispatch(newTodo);
      setTask('');
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        onChange={(e) => setTask(e.target.value)}
        onKeyUp={handleKeyUp}
        value={task}
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
      />
    </header>
  );
}
